
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/demo/demo.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/easyui/jquery.easyui.min.js"></script>


<body>

	<table id="dg" toolbar="#tb" title="DataGrid with Toolbar"></table>

	<div id="tb">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="javascript:alert('Add')">Add</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-cut" plain="true"
			onclick="javascript:alert('Cut')">Cut</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-save" plain="true"
			onclick="javascript:alert('Save')">Save</a>
	</div>

	<script>
		$.extend($.fn.datagrid.methods, {
			clientPaging : function(jq) {
				return jq.each(function() {
					var dg = $(this);
					var state = dg.data('datagrid');
					var opts = state.options;
					opts.loadFilter = pagerFilter;
					var onBeforeLoad = opts.onBeforeLoad;
					opts.onBeforeLoad = function(param) {
						state.allRows = null;
						return onBeforeLoad.call(this, param);
					}
					var pager = dg.datagrid('getPager');
					pager.pagination({
						onSelectPage : function(pageNum, pageSize) {
							opts.pageNumber = pageNum;
							opts.pageSize = pageSize;
							pager.pagination('refresh', {
								pageNumber : pageNum,
								pageSize : pageSize
							});
							dg.datagrid('loadData', state.allRows);
						}
					});
					$(this).datagrid('loadData', state.data);
					if (opts.url) {
						$(this).datagrid('reload');
					}
				});
			},
			loadData : function(jq, data) {
				jq.each(function() {
					$(this).data('datagrid').allRows = null;
				});
				return loadDataMethod.call($.fn.datagrid.methods, jq, data);
			},
			deleteRow : function(jq, index) {
				return jq
						.each(function() {
							var row = $(this).datagrid('getRows')[index];
							deleteRowMethod.call($.fn.datagrid.methods,
									$(this), index);
							var state = $(this).data('datagrid');
							if (state.options.loadFilter == pagerFilter) {
								for (var i = 0; i < state.allRows.length; i++) {
									if (state.allRows[i] == row) {
										state.allRows.splice(i, 1);
										break;
									}
								}
								$(this).datagrid('loadData', state.allRows);
							}
						});
			},
			getAllRows : function(jq) {
				return jq.data('datagrid').allRows;
			}
		});

		$(document).ready(function() {
			$('#dg').datagrid({
				url : 'datagrid_data',
				singleSelect : true,
				autoRowHeight : false,
				pagination : true,
				rownumbers : true,//行号
				pageSize : 10,
				columns : [ [ {
					field : 'itemid',
					title : 'Item ID',
					rowspan : 2,
					width : 80,
					sortable : true
				}, {
					field : 'productid',
					title : 'Product ID',
					rowspan : 2,
					width : 80,
					sortable : true
				}, {
					title : 'Item Details',
					colspan : 4
				} ], [ {
					field : 'listprice',
					title : 'List Price',
					width : 80,
					align : 'right',
					formatter : formatPrice,
					sortable : true
				}, {
					field : 'unitcost',
					title : 'Unit Cost',
					width : 80,
					align : 'right',
					formatter : formatPrice,
					sortable : true
				}, {
					field : 'attr1',
					title : 'Attribute',
					width : 100
				}, {
					field : 'status',
					title : 'Status',
					width : 60
				} ] ]
			});
		});

		function formatPrice(val, row) {
			var n = new Number(val);
			return n.toFixed(2);
		}
	</script>
</body>